<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>钟文迪的期末作业</title>
    <style>
        * {
            padding: 0;
            margin: 0;

        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        body {
            background-color: black;
            margin: 0;
        }

        .sousuo {
            width: 1230px;
            height: 78px;
            margin: 0px -265.2px 0px 0px;
            background-color: black;
            margin: 0 auto;
        }

        .logo {
            float: left;
            width: 132px;
            height: 49px;
            margin-top: 10px;
        }

        .shuolan {
            float: left;
            width: 55%;
            height: 62px;
            margin-left: 30px;
            padding-top: 16px;

        }

        .shuolan>li {
            float: left;
            width: 20%;
            height: 78px;
            text-align: center;
        }

        .shuolan>li>a {
            font: 400 18px 微软雅黑;
            color: #ffffff;
            letter-spacing: 1px;

        }

        p {
            font-size: 11px;

        }

        .yh {
            float: right;
            width: 248px;
            height: 78px;
            position: relative;
            z-index: 3;

        }

        .dl {
            float: left;
            width: 48px;
            height: 48px;
            position: relative;
            margin-top: 14px;
            line-height: 48px;
            text-align: center;
            font-size: 0;
        }

        .wz {
            float: left;
            height: 78px;
            margin-left: 10px;
            margin: center center;
        }

        .wz>.dd {
            color: #fefefe;
            font-size: 16px;
            line-height: 78px;


        }

        .box {
            position: relative;
            width: 100%;
            max-width: 1920px;
            min-width: 1240px;
            overflow: hidden;
            height: 990px;
            margin: 0 auto;
            z-index: 1;
        }


        .main {
            widows: 100%;
            height: 990px;
            margin: 0 auto;



        }

        .bgdp {

            position: fixed;
            right: 0;
            bottom: 0;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: -9999;
        }

        source {
            min-width: 100%;
            min-height: 100%;
            height: auto;
            width: auto;

        }

        .slogo {
            background: url(z-title.png) no-repeat;
            width: 701px;
            height: 412px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 100px;
            z-index: 9;
        }

        .shijian {
            font-size: 27px;
            color: #ffffff;
            position: absolute;
            width: 100%;
            text-align: center;
            top: 483px;
        }

        .plogo {
            background: url(f-title.png) no-repeat;
            width: 763px;
            height: 69px;
            position: absolute;
            left: 52%;
            transform: translateX(-50%);
            top: 538px;
        }

        .sanbq {
            position: absolute;
            top: 700px;
            left: 100px;
            width: 100%;
            height: 74px;
            margin-left: 200px
        }

        .sanbq a {
            display: inline-block;
            margin: 0 auto;
            width: 260px;
            height: 70px;
            margin-left: 20px;

        }

        .one {
            background: url(1.png) no-repeat;
            left: -25px;
        }

        .two {
            background: url(2.png) no-repeat;
            left: -25px;
        }

        .san {
            background: url(4.png) no-repeat;
            left: -25px;
        }
    </style>
</head>

<body>
    <div class="sousuo">
        <a class="logo" href="http://lol.qq.com/"><img src="logo-public.png" width="167" height="60" alt=""></a>
        <ul class="shuolan">
            <li><a href="https://lol.qq.com/data/info-heros.shtml">游戏资料 <p>GAME INFO</p></a></li>
            <li><a href="http://lol.qq.com/">商城/合作<p>STORE</p></a></li>
            <li><a href="https://lol.qq.com/data/info-heros.shtml">社区互动<p>COMMUNITY</p></a></li>
            <li><a href="https://lpl.qq.com/">赛事官网<p>ESPORTS</p></a></li>
            <li><a href="http://lol.qq.com/">自助系统<p>SYSTEM</p></a></li>
        </ul>


        <div class="yh">
            <div class="dl"><img src="default.png" width="48" height="48" alt=""></div>
            <div class="wz">
                <p class="dd">"亲爱的召唤师，欢迎"<a href="#">登录</a></p>
            </div>
        </div>
    </div>



    <div class="box">
        <div class="main">
            <video class="bgsp" autoplay muted loop>
                <source src="bgsp.mp4" type="video/mp4" />
                <source src="polina.webm" type="video/webm">
            </video>
            <div class="slogo"> </div>
            <p class="shijian">活动时间：2020年6月12日12:00-7月22日23:59</p>
            <p class="plogo"></p>
            <div class="sanbq ">
                <a href="http://lol.qq.com/" class="one"></a>
                <a href="http://lol.qq.com/" class="two"></a>
                <a href="http://lol.qq.com/" class="san"></a>
            </div>





        </div>
    </div>
</body>

</html>